<template>
  <div class="chart-module">
    <slot></slot>
    <div class="chart-module-hd drag-tongs">
      <div class="title">
        <router-link :to="'/make/' + id" v-if="place === 'dashboard'">{{ title }}</router-link>
        <template v-else>{{ title }}</template>
      </div>
      <a-tooltip v-if="describe">
        <template #title>{{ describe }}</template>
        <InfoCircleOutlined class="describe" />
      </a-tooltip>
    </div>
    <div class="chart-loading">
      <div class="chart-loading-box" v-show="spinning">
        <a-spin :spinning="spinning"/>
        <div class="text">正在请求api数据...</div>
      </div>
    </div>
    <div class="chart-module-centent" :id="id"></div>
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { globalConfig, field } from './common/pubConfig';
  import { Line } from '@antv/g2plot';
  import mixin from './common/mixin';
  import { transformData } from '@/constants/initDefaultData';
  import { InfoCircleOutlined } from '@ant-design/icons-vue';


  export default defineComponent({
    components: { InfoCircleOutlined },
    mixins: [mixin],
    props: {},

    data() {
      return {};
    },

    created() {},

    methods: {
      /**
       * 渲染图表
       */

      $render() {
        let self = this
        this.chartObj = new Line(this.id, {
          ...globalConfig(),
          ...field(),
          data: transformData(this.showData),
          ...this.chart.config,
          tooltip: {
            showMarkers: true
          },
          point: {
            size: 0,
            state: {
              selected: {
                style (x, y, series) {
                  let data = x.data, cellSelectedData = self.cellSelectedData
                  if (data.x === cellSelectedData.x && data.type === cellSelectedData.type && data.value === cellSelectedData.value) {
                   return {
                      fill: "#000",
                      r: 4,
                      stroke: "#000"
                    }
                  }
                  return null
                }
              }
            }
          },
          state: {
            selected: {
              style: {
                lineWidth: 2,
              }
            }
          }
        });

        this.chartObj.render();

        this.chartObj.on('tooltip:change', v => {
          this.selectedData = v.data.items.map(o => o.data)
        })

        this.chartObj.on('element:click', (v) => {
          let changeData = null
          for (let i = 0; i < v.data.data.length; i++) {
            let data = v.data.data[i]
            let find = this.selectedData.find(d => data.x === d.x && data.type === d.type && data.value === d.value)
            if (find) {
              changeData = find
              break
            }
          }
          if (changeData) {
            this.$emit('element-click', {data: changeData})
          }
        })
      },

      // 取消选中状态
      $unSelect () {
        this.chartObj.setState('selected', (v) => v, false)
      },

      // 选中图表
      $select (data) {
        this.$unSelect()
        if (data) {
          this.cellSelectedData = data
          this.chartObj.setState('selected', (v) => {
            return v
          })
        }
      }
    },
  });
</script>
<style lang="scss"></style>
